import { reactive, computed } from "vue";

const filters = {
  all(todos) {
    return todos;
  },
  completed(todos) {
    return todos.filter((todo) => todo.completed);
  },
  active(todos) {
    return todos.filter((todo) => !todo.completed);
  },
};

export default function(todos) {
  const filterState = reactive({
    todoStatus: "all",
    filterItems: [
      { label: "全部", value: "all" },
      { label: "已完成", value: "completed" },
      { label: "未完成", value: "active" },
    ],
    filterTodos: computed(() => {
      return filters[filterState.todoStatus](todos.value);
    }),
  });
  return filterState;
}
